@import "variables.scss";

a.orange,.orange{
    color: var(--main-color) !important;
}

.arrow-right-circle{
    width: 52px;height:52px;
    background: url(../images/arrow-right-circle.png) no-repeat;
    background-size: 100% auto !important;
    cursor: pointer;
    display: inline-block;
    transition: opacity .275s var(--bezier-mazel),transform .5s var(--bezier-bounce);
    &:hover{
        opacity: 1 !important;
        transform: translateX(10px);
    }
}
.logo {
    width: 126px;
    position: fixed;
    left: var(--fixed-horizontal-prop);
    top: var(--fixed-vercital-prop);
    z-index: $base-z+100;
    a {
        display: block;
    }
}

.bot-link {
    //width: 160px;
    //height: 18px;
    //background: url(../images/icon-link.png) no-repeat;
    position: fixed;
    cursor: pointer;
    bottom: var(--fixed-vercital-prop);
    right: var(--fixed-horizontal-prop);
    z-index: $base-z+90;
    color: #ffdc97;
    &.brand-item{
        width: 271px;
    }
}

.bot-bar{
    position: fixed;
    bottom: var(--fixed-vercital-prop);
    right: var(--fixed-horizontal-prop);
    z-index: $base-z+101;
    .weachat-item{
        width: 36px;height: 36px;display: block;float: left;position: relative;cursor: pointer;
        background: url(../images/icon-whceat.png) no-repeat center center;
        padding-right: 20px;margin-right: 20px;
        .wechat-code{
            width: 114px;position: absolute;display: block;bottom: 40px;left: 50%;margin-left: -57px;
            opacity: 0;
            transform: scale(0.2);
            transform-origin: bottom center;
            transition: all .275s var(--bezier-mazel);
        }
        &:after{
            content: '';width: 4px;height: 18px;background: #ffdc97;display: block;position: absolute;right: 0;top: 50%;margin-top: -9px;
        }
        &:hover{
            .wechat-code{
                 opacity: 1;
                transform: scale(1);
            }
        }
    }
}
.bot-logo {
    width: 168px;float: left;
    height: 36px;
    background: url(../images/bot-login.png) no-repeat;
    background-size: cover;
    display: block;
}

.explore-btn {
    width: 118px;
    height: 118px;
    position: fixed;
    left: 50%;
    margin-left: -59px;
    bottom: var(--fixed-vercital-prop);
    z-index: $base-z+91;
    cursor: pointer;
    .icon-explore-circle {
        width: 100%;
        height: 100%;
        background: url(../images/explore-btn.png) no-repeat;
        background-size: cover;
        display: block;
    }
    .txt {
        width: 120px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        color: #fad896;
        bottom:5px;
        text-align: center;
    }
    &:after {
        content: '';
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: 18%;
        top: 18%;
        background: #fbd78e;
        border-radius: 50%;
        background-image: -webkit-radial-gradient(center center, circle contain, #fbd78e 0%, #c8cc9b 25%, #fbd78e 40%, #c8cc9b 80%, transparent 100%);
        opacity: .4;
        transform: scale(.5);
        animation: exoloreAni 5s linear infinite;
        -webkit-animation: exoloreAni 5s linear infinite
    }
    &.aniCircle {
        .icon-explore-circle {
            animation: aniCircle linear infinite;
            -webkit-animation: aniCircle linear infinite;
            animation-duration: 1500ms;
        }
    }
}


@keyframes exoloreAni {
    0% {
        opacity: 0;
        transform: rotate(0) scale(0);
    }
    50% {
        opacity: 0.4;
        transform: rotate(360deg) scale(0.55);
    }
    100% {
        opacity: 0;
        transform: rotate(0) scale(0);
    }
}

@-webkit-keyframes exoloreAni {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(0);
    }
    50% {
        opacity: 0.4;
        -webkit-transform: rotate(360deg) scale(.55);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(0);
    }
}

@keyframes aniCircle {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes aniCircle {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.nav-box {
    width: 106px;
    height: 44px;
    position: fixed;
    right: var(--fixed-horizontal-prop);
    top: var(--fixed-vercital-prop);
    z-index: $base-z+100;
    margin-top: -2px;
    a.menu-btn {
        position: absolute;
        z-index: $base-z+5;
        display: block;
        color: var(--main-color);
        line-height: 44px;
        font-size: 14px;
        padding-right: 60px;
        text-transform: uppercase;
        .txt {
            display: inline-block;
            @include transition(all, 1s, var(--bezier-mazel));
        }
        &:after {
            content: '';
            width: 40px;
            height: 40px;
            background: url(../images/icon-menu.png) no-repeat center;
            background-size: 100% auto;
            position: absolute;
            top: 2px;
            right: 0;
            @include transition(all, 1s, var(--bezier-mazel));
        }
        &:hover {
            &:after {
                transform: rotateY(180deg);
            }
            .txt {
                transform: rotateX(360deg);
            }
        }
    }
    a.menu-close {
        width: 44px;
        height: 44px;
        box-sizing: border-box;
        position: absolute;
        background: #000;
        z-index: $base-z+2;
        right: 0;
        top: 0;
        opacity: 0;
        border-radius: 50%;
        @include transition(all, .4s, var(--bezier-mazel));
        transition-delay: .9s;
        -webkit-transition-delay: .9s;
        &:before,
        &:after {
            width: 20px;
            height: 2px;
            content: '';
            background: #fff;
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            margin-left: -10px;
        }
        &:before {
            transform: rotate(45deg);
        }
        &:after {
            transform: rotate(-45deg);
        }
        &:hover {
            transform: rotate(90deg);
        }
    }
    .nav-bg {
        width: 1500px;
        height: 1500px;
        border-radius: 50%;
        background: var(--main-color);
        z-index: $base-z+1;
        position: absolute;
        top: 50%;
        margin-top: -750px;
        right: -726px;
        transform: scale(0);
        -webkit-transform: scale(0);
        @include transition(all, 1s, cubic-bezier(.77, 0, .175, 1));
        transition-delay: 0.3s;
        -webkit-transition-delay: 0.3s;
    }
    .nav-con {
        width: 240px;
        position: absolute;
        top: 150px;
        right: -300px;
        z-index: $base-z+11;
        text-align: right;
        transition-delay: 1s;
        li {
            font-size: 20px;
            opacity: 0;
            transform: translate3d(35px, 0, 0);
            @include transition(all, .4s, var(--bezier-mazel));
            a {
                color: #000;
                padding: 12px 0;
                display: inline-block;
                position: relative;
                overflow: hidden;
                &:after {
                    width: 0;
                    height: 1px;
                    content: '';
                    background: #000;
                    position: absolute;
                    right: 0;
                    display: block;
                    @include transition(all, 0.5s, var(--bezier-mazel))
                }
                &:hover,
                &.cur {
                    &:after {
                        width: 100%;
                    }
                }
            }
            @for $i from 1 through 6 {
                &:nth-child(#{$i}) {
                    transition-delay: .6s-$i*0.1s+0.1s;
                    -webkit-transition-delay: .6s-$i*0.1s+0.1s;
                }
            }
        }
    }
    &.nav-open {
        .nav-bg {
            transform: scale(1);
            -webkit-transform: scale(1);
            transition-delay: 0s;
            -webkit-transition-delay: 0s;
        }
        a.menu-btn {
            .txt,
            &:after {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
            }
        }
        a.menu-close {
            z-index: $base-z+10;
            opacity: 1;
            transition-delay: 0s;
            -webkit-transition-delay: 0s;
        }
        .nav-con {
            right: 30px;
            transition: all 0s linear;
            li {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                @for $i from 1 through 6 {
                    &:nth-child(#{$i}) {
                        transition-delay: .5s+$i*0.1s-0.1s;
                        -webkit-transition-delay: .5s+$i*0.1s-0.1s;
                    }
                }
            }
        }
    }
}

// 内容框架
.wrap {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.mob-show {
    display: none;
}

.mobnav-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z+170;
    background: rgba(0, 0, 0, .4);
    display: none;
}

.video-bg-box {
    position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: $base-z+12;
    .video-bg {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .video-tvc {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            width: 100%;
            transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            object-fit: cover;
        }
    }
}


a.btn-link-ani{
    position: relative;display: inline-block;overflow: hidden;
    .txt{
        position: relative;z-index: 11;
    }
    &:after{
        content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;
        background: #000;
        transform: translate3d(-100%,0,0);
        transition: all .275s var(--bezier-mazel);
        z-index: -1;
    }
    &:hover{
        color: #000;
        &:after{
             transform: translate3d(75%,0,0);
        }
        i{
            color: #fff;
        }
    }
}


a.contact-btn,
.contact-btn {
    color: #fff;
    background: url(../images/icon-contact.png) no-repeat left center;
    padding-left: 72px;
    display: inline-block;
}

@keyframes FTCircleAni {
    0% {
        opacity: 0;
        transform: rotate(0) scale(0);
    }
    50% {
        opacity: 0.5;
        transform: rotate(360deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(0) scale(0);
    }
}
@-webkit-keyframes FTCircleAni {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(0);
    }
    50% {
        opacity: 0.5;
        -webkit-transform: rotate(360deg) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0) scale(0);
    }
}
.copyright {
    width: 100%;
    z-index: $base-z+40;
    color: rgba(255, 255, 255, .8);
    color: #ffdc97;
    a {
        color: #ffdc97;
        &:hover {
            text-decoration: underline;
        }
    }
    &.fixed{
        position: fixed;left: var(--fixed-horizontal-prop);bottom:var(--fixed-vercital-prop);
    }
}

//
// css3 @keyframes animation css start
//
@keyframes zoomAni {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes zoomAni {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes lightsFlash {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.1;
    }
}

@-webkit-keyframes lightsFlash {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.1;
    }
}

.lightsFlash {
    animation-name: lightsFlash;
    -webkit-animation-name: lightsFlash;
}

@keyframes zoomOut2 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(3.5);
    }
}

@-webkit-keyframes zoomOut2 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(3.5);
    }
}

.zoomOut2 {
    animation-name: zoomOut2;
    -webkit-animation-name: zoomOut2;
}

@keyframes zoomOut3 {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: .5;
        transform: scale(5);
    }
}

@-webkit-keyframes zoomOut3 {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: .5;
        -webkit-transform: scale(5);
    }
}

.zoomOut3 {
    animation-name: zoomOut3;
    -webkit-animation-name: zoomOut3;
}

@keyframes zoomOut4 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-102%, 50%, 0) scale(5.2);
    }
}

@-webkit-keyframes zoomOut4 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-102%, 50%, 0) scale(5.2);
    }
}

.zoomOut4 {
    animation-name: zoomOut5;
    -webkit-animation-name: zoomOut4;
}

@keyframes zoomOut5 {
    0% {
        transform: translate3d(-102%, 50%, 0) scale(5.2);
    }
    100% {
        transform: translate3d(-0, 0, 0) scale(1);
    }
}

@-webkit-keyframes zoomOut5 {
    0% {
        -webkit-transform: translate3d(-102%, 50%, 0) scale(5.2);
    }
    100% {
        -webkit-transform: translate3d(-0, 0, 0) scale(1);
        ;
    }
}

.zoomOut5 {
    animation-name: zoomOut5;
    -webkit-animation-name: zoomOut5;
}

@keyframes zoomIn5 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(5);
    }
}

@-webkit-keyframes zoomIn5 {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(5);
    }
}

.zoomIn5 {
    animation-name: zoomIn5;
    -webkit-animation-name: zoomIn5;
}

.font-T {
    width: 100%;
    height: 100%;
    background: url(../images/T.png) no-repeat 30% center;
    background-size: cover;
}

.think {
    width: 116px;
    position: relative;
    margin-bottom: 10px;
    display: block;
    &:after {
        content: '';
        width: 92px;
        height: 1px;
        background: #fff;
        position: absolute;
        left: -108px;
        bottom: 13px;
        opacity: .8;
    }
}

// 联系我们弹框
.pop-mask,.brand-pop-mask {
    position: fixed;left: 0; right: 0;bottom: 0;top: 0;z-index: $base-z+320;background: rgba(0, 0, 0, .7);
    display: none;
}
.brand-pop-mask{
    background: rgba(0, 0, 0, .7);
}
.contact-pop {
    width: 73.69vw;height: 42.135vw;
    max-width: 1415px;max-height: 809px;
    position: fixed;left: 50%;top: 50%;
    z-index: $base-z+321;
    background: url(../images/contact-bg.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transform:translate3d(-50%, -50%,0) scale(0);
    transition: all .4s var(--bezier-mazel);
    .inner {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .pop-close-btn {
        position: absolute;
        right: -32px;
        top: 0;
    }
    .icon-share {
        width: 305px;
        display: block;  
    }
    .contact-con {
        width:540px;
        padding: 50px 30px;
        float: left;
        background: rgba(0, 0, 0, .5);
        border: 5px #ffdc97 solid;
        border-radius: 10px;
        box-sizing: border-box;
        margin-left: 7.06%;
        h4{
            font-size:var(--f-size-24);padding-bottom: 10px;
        }
        .address {
            padding-bottom: 25px;         
            span {
                display: block;font-size:15px;
                &.en{line-height: 1.2;padding-bottom: 6px;}
            }
        }
    }
    &.show {
        opacity: 1;
        transform:translate3d(-50%, -50%,0) scale(1);
    }
}
.share-bar{
    padding-top: 10px;
    display: flex;
    a{
        width: 44px;height: 44px;margin-right:20px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon{width: 100%;display: block;}
        .code-box{
            position: absolute;
            transform-origin: bottom center;
            transition: transform .275s ease-in;
            transform: translate(-50%,0) scale(0);
            background-color: #fff;
            padding: 5px 15px;
            left: 50%; bottom: 54px;
            border-radius: 3px;
            color: #333;
            &::after{
                content: '';
                border-top:5px #fff solid;
                border-left:5px transparent solid;
                border-right:5px transparent solid;
                position: absolute;bottom: -5px;left: 50%;margin-left: -5px;
            }
        }
        &.wechat{
            .code-box{
                width: 100px;height: 100px;padding: 4px;
            }
        }
        &:hover{        
            .code-box{
                transform: translate(-50%,0) scale(1);
            }
        }
    }
}
.pop-close-btn {
    width: 32px;
    height: 32px;
    display: block;
    transition: all .25s linear;
    &:after,
    &:before {
        content: '';
        position: absolute;
        width: 20px;
        height: 2px;
        background: #ffdc97;
        left: 50%;
        margin-left: -10px;
        top: 50%;
        margin-top: -1px;
    }
    &:before {
        transform: rotate(45deg);
    }
    &:after {
        transform: rotate(-45deg);
    }
    &:hover {
        transform: rotate(-180deg);
    }
}
.trajectory-img {
    width: 31.024%;
    float: right;
    margin-right: 6.43%;
}

.brand-detail-pop{
    width: 50vw;height:70vh;border: 4px rgba(255,220,151,0.85) solid;box-sizing: border-box;
    max-width:600px;
    padding:35px 30px 30px 40px;
    position: fixed;left: 50%;top: 50%;transform:translate3d(-50%, calc(-50% - 40px) ,0) scale(0) ;z-index: $base-z+321; 
    opacity: 0;
    transition: all .275s var(--bezier-mazel);
    background: rgba(0, 0, 0, 0.5);	
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    .close-pop{
        width: 44px;height:44px;
        background: url(../images/icon-error.png) no-repeat center center; 
        background-size:cover;
        position: absolute;left: 50%;transform: translateX(-50%) rotate(0); bottom: -80px;
        cursor: pointer;
        opacity: 0.75;
        display: block;
        transition: all .275s linear;
        &:hover{
            opacity: 1;
            transform:translateX(-50%) rotate(180deg);
        }
    }
    &.opened{
        opacity: 1;
        transform: translate3d(-50%, calc(-50% - 40px) ,0) scale(1);
    }
}


// 案例页面
.filter-nav {
    $line-color: #ffdc97;
    position: relative;
    margin-top: 120px;
    border-top: 1px $line-color solid;
    ul {
        li {
            width: 12.5%;
            float: left;
            text-align: center;
            position: relative;
            a {
                color: $line-color;
                font-size: 10px;
                display: block;
                padding-top: 25px;
                position: relative;
                &:after {
                    content: '';
                    width: 1px;
                    height: 19px;
                    background: $line-color;
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: -9px;
                }
                &:hover {
                    text-decoration: underline;
                }
            }
            &:first-child {
                a:before {
                    content: '';
                    width: 50%;
                    left: 0;
                    height: 1px;
                    position: absolute;
                    top: -1px;
                    background: #000;
                    display: block;
                    z-index: 99;
                }
            }
            &:last-child {
                a:before {
                    content: '';
                    right: 0;
                    height: 1px;
                    position: absolute;
                    top: -1px;
                    width: 50%;
                    background: #000;
                    display: block;
                    z-index: 99;
                }
            }
            &.cur {
                a {
                    font-size: 14px;
                    text-transform: uppercase;
                }
            }

        }
    }
    .bg-silde {
        width: 28px;
        height: 20px;
        background: $line-color;
        position: absolute;
        top: -10px;
        border-radius: 50%;
        display: block;
        left: 6.25%;
        z-index: 101;
    }
}

.case-list {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 80px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    li.item {
        overflow: hidden;
        margin-bottom: 10px;
        float: left;
        a {
            display: block;
            position: relative;
            height: 100%;
            overflow: hidden;
            h3 {
                font-size: 20px;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                margin-top: -10px;
                text-align: center;
                transform: translate3d(0, 200px, 0);
                transition: all .3s var(--bezier-mazel);
                z-index: 101;
            }
            img {
                transition: all .75s var(--bezier-mazel);
                width: auto;
                height: 240px;
                vertical-align: bottom;
            }
            &:after {
                content: '';
                left: 0;
                right: 0;
                top: 0;
                height: 0;
                background: rgba(0, 0, 0, .5);
                position: absolute;
                z-index: 30;
                transition: all .3s var(--bezier-mazel);
            }
            &:hover {
                &:after {
                    height: 100%;
                }
                h3 {
                    transform: translate3d(0, 0, 0);
                }
                img {
                    transform: scale(1.1);
                }
            }
        }
    }
}

.case-container:before,
.case-container:after {
    content: "";
    display: table;
}

.case-container:after {
    clear: both;
}

.case-container .first-item {
    clear: both;
}


/* remove margin bottom on last row */

.case-container .last-row,
.case-container .last-row~.item {
    margin-bottom: 0;
}

//
// 案例详情页面
.swiper-button-prev, .swiper-button-next{
     width: 44px;
     height: 88px;
     &::after{
        display: none;
     }
}
.swiper-button-prev{
     background: url(../images/swiper-prev.png) no-repeat center 42%;
     background-size: 27px 52px;
}
.swiper-button-next{
    background: url(../images/swiper-next.png) no-repeat center 42%;
    background-size: 28px 52px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
    background: var(--main-color);
}

.brand-swiper{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    .swiper-slide{
        &.brand-slide{
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        @for $i from 1 through 13{
            &.brand-slide-#{$i}{
                 background-image: url(../images/luodian/img-item-#{$i}.jpg);
            }
        }
        .swiper-container-inner{
            width: 998px;height: 560px;position: absolute;left: 50px;top: 50%;margin-top: -232px;
            &.swiper-container-inner2{
                left: auto;right: 50px;
            }
            .swiper-slide{
                height: 560px;
                h4{
                   position: absolute;top: 525px;right: 0;color: #5a0502;font-size: 19px;
                }
            }
            .swiper-pagination{
                text-align: right;bottom: 30px;
            }
            .swiper-pagination-bullet {
                height: 6px;
                width: 6px;
                border: 2px #5a0502 solid;
                background: transparent;
                opacity: 1;
            }
            .swiper-pagination-bullet-active{
                background: #5a0502;
            }
            &.swiper-container-vertical>.swiper-pagination-bullets{
                top: auto;right: 0;left: 0;
                .swiper-pagination-bullet{
                    display: inline-block;margin: 0 4px;
                }
            }

        }
    }
}

//
// 人物详情弹出框
.close-btn{
    display: inline-block;width: 48px;height: 48px;background: rgba(0,0,0,.6);position: relative;
    border-radius: 50%;
    overflow: hidden;
    text-indent: 999px;
    &:after,
    &:before{
       content: '';position: absolute; width: 24px;height: 2px;background: var(--main-color);left: 50%;top: 50%;
       margin-left: -12px;margin-top: -1px;
    }
    &:before{
        transform: rotate(45deg);
    }
    &:after{
        transform: rotate(-45deg);
    }
}
.intro-pop{
    position: fixed; z-index: $base-z+301;left: 0;top: 0;right: 0;bottom: 0;
    background: url(../images/person-pop-bg.jpg);
    background-size: 100% 100%;
    transform: translate3d(0,-120%,0);
    -webkit-transform: translate3d(0,-120%,0);
    transition: all .275s var(--bezier-mazel);
    &.opened{
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    .close-btn{
        position: absolute;right: 40px;top: 40px;
    }
    .person-item{
        width: 28%;position: absolute;left: 50%;top: 50%;
        transform: translate(-50%,-55%);
        &.w50{
            width: 50%;
        }
    }
    .intro-text{
        width: 1287px;
        height: 780px;
        box-sizing: border-box;
        position: absolute;z-index: 101;left: 50%;top: 50%;
        transform: translate(-50%,-44%);
        background: url(../images/screen.png) no-repeat;
        background-size: 100% 100%;
        .inner{
            padding: 120px;height: 780px-240px;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        h3{ font-size: 20px;padding-bottom: 4px;}
        p{padding-bottom: 8px;}
    }
}

//
// 产品实验
body.pro-bg{
    background: url(../images/pro-bg.jpg) fixed;
    background-size: cover;
}

.product-swiper{
    padding-left: 0;
    width: 100vw;
    height: 100vh;
    .swiper-slide{
        display: flex;
        align-items: center;
        .title{
            position: absolute; z-index: $base-z;top: 50%;left: 90px;right: 0;
            transform: translate(0,-50%);
            h3{
                width:100%;font-size: 44px;font-weight: bold;position: relative;
                border-bottom: 1px #fff solid;
                margin-bottom: 10px;
                &:after{
                    content: '';width: 10px;height: 10px;position: absolute;background: #fff;left: 0;bottom: -10px;
                }
            }
            .text{
                text-transform: uppercase;font-weight: 200;
            }
        }
    }
    .swiper-slide:nth-child(1){
        width:77vw;
        .inner{
            .img-item{
                width: 65%;position: absolute;top: 0;left: 0;bottom: 0;
                img{height: 100%; object-fit: cover;}
            }
            .title{
                left: 58%;
                h2{
                    font-size: 72px;font-weight: bold; line-height: 1.2;
                }
                .text{
                    font-size: 24px;position: relative;
                    padding-left:54px;
                    &:after{
                        content: '';width: 50px;height: 1px;background: #fff;position: absolute;left: 0;top: 50%;
                    }
                }
            }
         }
    }
    .swiper-slide:nth-child(2){
        width:86%;
    }
    .swiper-slide:nth-child(3){
        width:75%;
    }
}

.case-nav{
    $color-theme-balck:#000;
    position: fixed;z-index: $base-z+98;right: 20px;top: 0;bottom: 0;
    //transform: translate3d(300px,0,0);
    transition: all .275s var(--bezier-mazel);
    &.show{
       transform: translate3d(0,0,0);
    }
    &.theme-black{
       ul{
           &:before,
           &:after{
              background: $color-theme-balck;
           }
           li{
               color: $color-theme-balck;
               //text-shadow: 1px 1px 0 rgba(255,255,255,.6);
               &:before{
                   border-color: $color-theme-balck
               }
               &:after{
                   background: $color-theme-balck;
               }
               &.active{
                   &:before{
                       background: $color-theme-balck
                   }
               }
           }
       }
    }
    ul{
        width: 210px;
        position: absolute;top: 50%;right: 0;
        transform: translate3d(0,-50%,0);
        &:before,
        &:after{
            content: '';position: absolute;right: 5px;background: var(--main-color);width: 1px; height: 800px;
            transition: all .275s var(--bezier-mazel);
        }
        &:before{
            top: -784px;
        }
        &:after{
            bottom: -784px;
        }
        li{
            text-align: right;cursor: pointer;position: relative;color: var(--main-color);
            padding: 12px 35px 12px 0;
            height:30px;line-height:30px;
            transition: all .275s var(--bezier-mazel);
            &:before{
                content: '';width: 10px;height: 10px;border-radius: 50%;border: 1px var(--main-color) solid;
                position: absolute;right: 0;top: 50%;margin-top: -5px;
                transition: all .275s var(--bezier-mazel);
            }
            &:after{
                content: '';width: 1px;height:32px;top: 39px;background: var(--main-color);position: absolute;right: 5px;
                transition: all .275s var(--bezier-mazel);
            }
            &:last-child{
                &:after{
                    display: none;
                }
            }
            &.active{
                font-weight: bold;
                &:before{
                    background: var(--main-color);
                }
            }
        }
    }
}

@media screen and (max-width:1460px) {
    .intro-pop{
        .intro-text{
            width: 900px;
            height: 600px;
            .inner{
                padding: 90px;height: 420px;
            }
        }
    }
}

@media screen and (max-width:1200px) {
    .contact-pop {
        width:80vw;height:60vw;
        .contact-con {
            width:50%;
            .address {
                padding-bottom: 25px;         
                span {
                    display: block;font-size:15px;
                    &.en{line-height: 1.2;padding-bottom: 6px;}
                }
            }
        }
    }

}

@media screen and (max-width:768px) {
    .mob-hide {
        display: none
    }
    .mob-show {
        display: block
    }
    .logo {
        width: 66px;
        left: var(--fixed-horizontal-prop);
        top: var(--fixed-vercital-prop);
    }
    .bot-link {
        // width: 80px;
        // height: 44px;
        // background-position: left center;
        // background-size: 80px 9px;
        // bottom: 10px;
        right: var(--fixed-horizontal-prop);
        &.brand-item{
            width:135px;
        }
    }
    .nav-box {
        width: 70px;
        right: var(--fixed-horizontal-prop);
        top: var(--fixed-vercital-prop);
        margin-top: -12px;
        a.menu-btn {
            font-size: 12px;
            padding-right: 30px;
            &:after {
                background-size: 20px 18px;
                background-position: right 50%;
            }
        }
        a.menu-close {
            right: -7px;
        }
        .nav-bg {
            width: 1000px;
            height: 1000px;
            margin-top: -500px;
            right: -486px;
        }
        .nav-con {
            top: 100px;
            li {
                font-size: 18px;
            }
        }
    }
    .explore-btn {
        width: 60px;
        height: 60px;
        margin-left: -30px;
        bottom:55px;
        .txt {
            bottom: -5px;
            font-size: 1rem;
        }
    }
    
    .scenes-bg {
        &.scenes-bg2 {
            transform: scale(1.25);
        }
        &.scenes-T-bg {
            background-size: 100% 100%;
        }
    }
    a.contact-btn,
    .contact-btn {
        padding-left: 36px;
        background-size: 31px 8px;
    }
    .contact-pop {
        height:auto;
        .icon-share {
            width: 150px;
        }
        .inner{
            position: static;
            transform: translate(0,0);
        }
        .contact-con {
            width: 100%;
            background: none;
            margin: 0 auto;
            margin-left: 0;
            border-radius: 0;
            border: none;
            .address {
                padding-bottom: 16px;
            }
        }
    }
    .brand-detail-pop{
        width:90vw;height:73vh;
        padding: 20px 10px 20px 20px;
        .close-pop{
            bottom: -70px;
        }
    }
    .share-bar{
        a{
          &:hover{             
              .code-box{
                  transform: translate(-50%,0) scale(1);
              }
          }
      }
    }
    .font-T {
        background: url(../images/T.png) no-repeat center center;
        background-size: 100%;
    }
    .bot-bar{
        height: 30px;
        bottom: 30px;
    }
    .bot-logo {
        width: 140px;
    }
    .filter-nav {
        margin-top: 80px;
    }
    .case-list {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 30px;
    }
    .product-swiper{
        .swiper-slide{
            .title{               
                h3{
                    font-size:30px;
                }
            }
        }
        .swiper-slide:nth-child(1){
            width:90vw;
            .inner{
                .img-item{
                    width:70%;
                }
                .title{
                    h2{
                        font-size:60px;
                    }
                    .text{
                        font-size: 20px;
                    }
                }
             }
        }
    }
}

@media screen and (max-width:480px) {
    .think {
        width: 60px;
        &:after {
            width: 40px;
            left: -47px;
            bottom: 10px;
        }
    }
    .swiper-slide {
        &.scenes-item5 {
            .txt {
                top: 54%;
                right: 10px;
                left: none;
            }
        }
    }
    .bot-bar{
        bottom: 20px;
    }
    .client-cont {
        margin: 50px auto 0 auto;
        h2 {
            font-size: 20px;
            padding-left: 30px;
        }
        li {
            width: 33.333%;
            padding: 10px;
        }
    }
    .case-list {
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
        ul {
            overflow: hidden;
        }
        li.item {
            width: 100%;
            overflow: hidden;
            a {
                h3 {
                    font-size: 14px;
                }
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
    .bot-link {
        &.brand-item{
            width:auto;
        }
    }
}

@media screen and (max-width:320px) {
    // 栅格系统
    .wrap {
        padding-left: 10px;
        padding-right: 10px;
    }
}